<template>
<div class="page" :key="timer">
<Drawer width="250" :title="(data1.chain_name||chainItem1.chain_name)+'('+ (total==10000?'10000+':total) +')'" :mask-closable='!loading' v-model="isshow">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了~"
    @load="onLoad">
    <div class="item-c" v-for="(item) in companyList" :key='item.id' @click="toDetail(item)">
      <div class="flex1">
        <div class="c-left">
          <div class="score">{{item.score}}</div>
          <div class="cH">得分</div>
        </div>
        <div class="c-right">
          <div class="c-title c-b">{{item.company_name}}</div>
          <div class="c-title cH">电话：{{item.elephone}}</div>
        </div>
      </div>
    </div>
  </van-list>
</Drawer>
    <div class="companyList" v-loading='isLoading' element-loading-background="rgba(0, 0, 0, 0.3)" element-loading-text="正在加载" >
      <div class="header">{{chain_name}}产业链现状图</div>
      <city-select  @changeInit='changeInit1'/>
      <div class="section-main" ref="fx">
        <div v-for='item in data' :key="item.id" class="section">
          <div class="section-level" @click="showList(item)">{{item.chain_name}} <span class="red" :class="!item.company_total?'color3':''">({{item.company_total}})</span></div>
          <div class="section-content">
            <div :class="[item1.hasGChild?'has-grandchild':item1.hasChild?'has-children':'','node','level1']" v-for="item1 in item.children" :key="item1.id">
              <div class="a" :class="!item1.company_total?'color3':''" @click="showList(item1)">{{item1.chain_name}}&nbsp;<span class="red" :class="!item1.company_total?'color3':''">({{item1.company_total}})</span></div>
              <div :class="[item2.hasChild?'has-children':'','node',item1.hasGChild?'level1':'']" v-for="item2 in item1.children" :key="item2.id">
                <div class="a" :class="!item2.company_total?'color3':''" @click="showList(item2)">{{item2.chain_name}}&nbsp;<span class="red" :class="!item2.company_total?'color3':''">({{item2.company_total}})</span></div>
                <div class="node level3" v-for="item3 in item2.children" :key="item3.id">
                  <div class="a" :class="!item3.company_total?'color3':''" @click="showList(item3)">{{item3.chain_name}}&nbsp;<span class="red" :class="!item3.company_total?'color3':''">({{item3.company_total}})</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="chain_div">
        <div class="flex l-item">
          <img class="img" src="~@a/img/chainFX/GS.png" alt="">
          <div class="blue">强链：</div>
          <div style="color:#666" v-for="(item,index) in chainLData[0].value" :key="index">{{item.chain_name}} <span v-show="index+1<chainLData[0].value.length">,</span> </div>
        </div>
        <div class="flex l-item">
          <img class="img" src="~@a/img/chainFX/FL.png" alt="">
          <div class="blue">补链：</div>
          <div style="color:#666" v-for="(item,index) in chainLData[1].value" :key="index">{{item.chain_name}} <span v-show="index+1<chainLData[1].value.length">,</span> </div>

        </div>
        <div class="flex l-item">
          <img class="img" src="~@a/img/chainFX/QJT.png" alt="">
          <div class="blue">延链：</div>
          <div style="color:#666" v-for="(item,index) in chainLData[2].value" :key="index">{{item.chain_name}} <span v-show="index+1<chainLData[2].value.length">,</span> </div>
        </div>
      </div>
    </div>
    <jj-map @showList='showList1'/>
    <city-map @showList='showList1'/>
</div>
</template>
<script>
import { myIndustrychain,companylist,chain_com_count } from '@/api/api.js'
import jjMap from './modules/jjMap.vue'
import citySelect from './modules/city.vue'
import cityMap from './modules/cityMap.vue'

export default {
  data(){
    return{
      isLoading:false,
      chain_name:'',
      isLoad:false,
      loading:false,
      list:{company_total:''},
      companyList:[],
      total:1,
      finished:false,
      isshow:false,
      chainItem1:{
        chain_name:''
      },
      page:1,
      data1:{},
      data:[],
      chainLData:[{value:''},{value:''},{value:''}],
      timer:1,
      city_id:''
    }
  },
  components:{
    jjMap,
    cityMap,
    citySelect
  },
  computed:{

  },
  created(){
    this.chain_name=this.$route.query.chain_name
    this.city_id=this.$route.query.city_id
    this.changeInit()
    this.getChain()
  },
  mounted(){
    
  },
  methods:{
    changeInit1(cityItem){
      this.city_id=cityItem.id
      this.changeInit()
      this.getChain()
    },
    getChain(){
      let data={
        chain_id:this.$route.query.chain_id||'126791',
        city_id:this.city_id,
        id:this.$route.query.id||'50'
      }
      chain_com_count(data).then(res=>{
        console.log(res)
        this.chainLData=res.data.messlist
      })
    },
    changeInit(){
      this.isLoading=true
      let data={
        chain_id:this.$route.query.chain_id||'126791',
        city_id:this.city_id,
        park_id:'',
        com_total_flag:1,
        own_chain:1,
        id:this.$route.query.id||'50'
      }
      myIndustrychain(data).then(res=>{
        let list = res.data
        this.hasChild_grand(list.children)
        this.isLoading=false
      }).catch(err=>{
        this.isLoading=false
      })
    },
    hasChild_grand(list){
      list.forEach(item=>{
        if(item.children&&item.children.length>0){
          item.children.forEach(item1=>{
            item1.num = item1.children?item1.children.length:0
            if(item1.children&&item1.children.length>0){
              item1.hasChild=true
              item1.children.forEach(item2=>{
                item2.num = item2.children?item2.children.length:0
                if(item2.children&&item2.children.length>0){
                  item2.hasChild=true
                  item1.hasGChild=true
                }
              })
              item1.children=item1.children.sort((a,b)=>{
                return a.num - b.num
              })
            }
          })
          item.children=item.children.sort((a,b)=>{
            return a.num - b.num
          })
        }
      })
      this.data=list
    },
    showList(item){
      this.data1={}
      this.chainItem1 = item
      this.isshow=true
      this.finished = false
      this.companyList=[]
      this.total = 1
      this.page=1
      this.getC()
    },
    showList1(data){
      this.data1 = data
      this.isshow=true
      this.finished = false
      this.companyList=[]
      this.total = 1
      this.page=1
      this.getC('',data)
    },
    onLoad () {
      this.page+=1
      this.getC('add',this.data1)
    },
    getC(type,data1){
      this.isLoad=true
      let data={
        chain_id:this.chainItem1.id,
        city_id:this.city_id,
        park_id:'',
        page:this.page,
        limit:20
      }
      if(data.park_id){
        data.city_id=''
      }
      if(data1&&data1.city_id){
        this.data1=data1
        data.chain_id=data1.chain_id
        data.city_id=data1.city_id
      }
      this.loading=true
      companylist(data).then(res=>{
        this.isLoad=false
        this.loading=false
        if(type=='add'){
          this.companyList = this.companyList.concat(res.data.data)
        }else{
          this.companyList=res.data.data
        }
        this.total = res.data.total
        if(this.companyList.length == this.total){
          this.finished = true;
        }
      })
    },
    toDetail(item){
      wx.miniProgram.navigateTo({
        url:'/pages/company/detail?identification='+item.identification
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
}
.flex1{
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #dfdfdf;
  .c-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    margin-right: 10px;
    .score{
      color: #BE0010;
      font-size: 14px;
    }
  }
  .c-right{
    width: calc(100% - 60px);
    position: relative;
    .c-title{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .c-b{
      font-weight: 600;
      color: #555;
      font-size: 12px;
    }
    &::after{
      content: ' ';
      position: absolute;
      right: -10px;
      height: 8px;
      width: 8px;
      top:18px;
      border-top: 1px solid rgb(9, 117, 179);
      border-right: 1px solid rgb(9, 117, 179);
      transform: rotate(45deg);
    }
  }
}
.cH{
  color: #515a6e;
}
.item-c{
  cursor: pointer;
}
.btn_qh{
  cursor: pointer;
  position: absolute;
  right: 20px;
  margin-top: -50px;
  font-size: 13px;
  width: 104px;
  height: 36px;
  background: rgba(0,255,233,.1);
  border-radius: 4px;
  text-align: center;
  color: #00ffe9 !important;
  font-family: PingFang-SC-Medium,PingFang-SC;
  font-weight: 500;
  line-height: 36px;
}
.btn_qh1{
  right: 130px;
}
.section-main{
  position: relative;
  overflow: auto;
  max-width: 100%;
  padding: 5px;
  min-height: 500px;
  // box-shadow: inset 0 0 10px 0 rgba(75,126,250,.9);
  // height: calc(100% - 1px);
}
.section-main::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(36, 71, 143, 1);
}
.section-main::-webkit-scrollbar-thumb {
  background-color: rgba(3, 168, 226, 1)
}
.section{
  display: flex;
  margin-bottom: 20px;
}
.section-level{
    position: relative;
    min-width: 60px;
    max-width: 60px;
    font-size:12px;
    color: rgb(41, 151, 255);
    // background: rgba(0,145,255,.7);
    background: rgba(252, 180, 14, 0.5);
    text-align: center;
    padding: 5px;
    word-break: break-all;
    border-radius: 10px 0 0 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.section-level:hover{
    color: #ff9933;
}
.section-content{
    margin-left: 5px;
    .node{
        float: left;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 5px 5px;
        width: 125px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        text-align: center;
        // border: 1px solid #0091ff;
        border: 1px solid #f93;
        
        border-radius: 4px;
        overflow: hidden;
        // color: #0091ff;
        color: #f93;
    }
    .a:hover{
      color: #fff;
    }
    .color3{
      color: #888;
    }
    .level1>.a{
      // background: rgba(0,145,255,.2);
      background: rgba(197, 141, 21, 0.2);
    }
    .level1>.node{
      border: none;
      margin: 0;
    }
    .has-children{
      width: auto;
      height: auto;
      max-width: 125px;
    }
    .has-grandchild>.node{
      // border: 1px solid #0091ff;
      border: 1px solid #f93;
      margin: 5px 5px;
    }
    .has-grandchild{
      width: auto;
      height: auto;
    }
}
.red{
  color:rgb(253, 66, 66);
}
.red1{
  color:rgb(246, 203, 12);
}
.companyList{
  margin: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #f3f4fb;
  .header{
    margin: 5px;
    font-size: 18px;
    font-weight: 600;
  }
  .chain_div{
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 5px;
    padding: 5px 0;
    .flex{
      display: flex;
      align-items: center;
      font-size: 13px !important;
    }
    .l-item{
      margin: 5px 0;
      .blue{
        color: #f93;
        min-width: 40px;
      }
    }
    img{
      width:18px;
      margin: 5px 5px 5px 10px;
    }
  }
}
</style>